<template >
  <div  style="height: 100%; width: 100%; display:block; border-radius: 15px; margin: 0 auto " :id="'scatterChart' + scat_id" >
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { ScatterChart, LineChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  MarkLineComponent,
  LegendComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  ScatterChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  MarkLineComponent,
  LegendComponent
])

export default {
  data() {
    return {
      params: {
        y: 123,
        x: 456
      },
      check1: false,
      check2: false,
      x_expList: [],
      y_expList: [],
      n_date: [],
      expMax_date: [],
      expMin_date: [],
      exp_date: [],
      date_poke: [],
      mark_date: {},
      mark_line: '',
      a: {},
      b: {},
      min: {},
      max: {},
      date: [],
      m_date: '',
      lastx: [],
      lastfx: [],
      timeData: [],
      time1: [],
      time2: [],
      option: {
        // title: {
        //   text: '带拟合线的散点图',
        //   textStyle: {
        //     color: '#6495ED',
        //     fontSize: '18',
        //     fontFamily: 'YouYuan'
        //   },
        //   left: '5%',
        //   top: '6%'
        // },
        grid: {
          x: 110,
          y: 100,
          x2: 220,
          y2: 80,
          borderWidth: 10
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(204, 229, 255, 0.8)',
          borderColor: '#333',
          formatter: function(arg) {
            if (arg === null) {
              return '该数据异常'
            } else {
              console.log(arg, 'arg')
              return '横坐标 :' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp' + arg.value[2] + '</br>' + '纵坐标 :' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + arg.value[1]
            }
          },
          axisPointer: {
            type: 'cross',
            snap: true
          }
        },
        legend: {
          data: [{name: '正常点', icon: 'circle'},
            {name: '异常点', icon: 'circle'},
            {name: '拟合线', icon: 'circle'},
            {name: '检泵线', icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z'},
            {name: '化清线', icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z'}],
          left: '33%',
          top: '5%',
          fontsize: 12,
          symbolSize: 15,
        },
        dataset: [
          {
            source: {
              'x': [],
              'y': [],
              'date': []
            }
          },
          {
            source: {
              'x': [],
              'y': [],
              'date': []
            }
          },
          {
            source: {
              'x': [],
              'y': [],
              'date': []
            }
          },
          {
            source: {
              'x': {},
              'y': []
            }
          },
          {
            source: {
              'x': {},
              'y': []
            }
          },
          {
            source: {
              'x': {},
              'y': []
            }
          }
        ],
        xAxis: [{ type: 'time', splitLine: { show: true }, internal: 3600 * 24 * 100, data: [] },
          { gridIndex: 0, type: 'value', splitLine: { show: true }, show: false }],
        yAxis: { gridIndex: 0, type: 'value' },
        series: [
          {
            datasetIndex: 0,
            xAxisIndex: 1,
            name: '正常点',
            type: 'scatter',
            encode: { x: 'x', y: 'y' },
            symbolSize: 10
          },
          {
            datasetIndex: 1,
            xAxisIndex: 1,
            name: '异常点',
            type: 'scatter',
            encode: { x: 'x', y: 'y' },
            itemStyle: {
              color: 'red'
            },
            symbolSize: 10
          },
          {
            datasetIndex: 2,
            xAxisIndex: 1,
            name: '拟合线',
            type: 'line',
            smooth: true,
            symbolSize: 0.5,
            symbol: 'circle',
            encode: { x: 'x', y: 'y' }
          },
          {
            xAxisIndex: 0,
            type: 'scatter',
            encode: { x: 'x', y: 'y' },
            symbol: 'none',
            markLine: {
              data: [{ xAxis: '' }]
            }
          },
          {
            // datasetIndex: 4,
            xAxisIndex: 0,
            name: '检泵线',
            type: 'scatter',
            encode: { x: 'x', y: 'y' },
            symbol: 'none',
            markLine: {
              data: [{ xAxis: '' }]
            },
            hidden: true
          },
          {
            // datasetIndex: 5,
            xAxisIndex: 0,
            type: 'scatter',
            name: '化清线',
            encode: { x: 'x', y: 'y' },
            symbol: 'none',
            markLine: {
              data: [{ xAxis: '' }]
            }
          }
        ]
      }
    }
  },
  created() {
    this.getDate()
    this.concatFatherData()
  },
  mounted() {
    this.Drawing()
  },
  methods: {
    getDate: function() {
      this.n_date = this.redis_Data.nor_date
      this.expMax_date = this.redis_Data.max_date
      this.expMin_date = this.redis_Data.min_date
    },
    concatFatherData: function() {
      this.y_expList = this.redis_Data.y_max_exp.concat(this.redis_Data.y_min_exp)
      this.x_expList = this.redis_Data.x_max_exp.concat(this.redis_Data.x_min_exp)
      this.exp_date = this.expMax_date.concat(this.expMin_date)
      this.date = this.exp_date.concat(this.n_date)
    },
    Maxxaxis: function() {
      var max = Math.ceil(Math.max.apply(null, this.redis_Data.x.concat(this.x_expList))) + 1
      return max
    },
    Maxyaxis: function() {
      var max = Math.ceil(Math.max.apply(null, this.redis_Data.y.concat(this.y_expList)))
      return max
    },
    Minxaxis: function() {
      var min = Math.floor(Math.min.apply(null, this.redis_Data.x.concat(this.x_expList))) - 1
      return min
    },
    Minyaxis: function() {
      var min = Math.floor(Math.min.apply(null, this.redis_Data.y.concat(this.y_expList)))
      return min
    },
    Drawing() {
      for (var i = 0; i < this.date.length; i++) {
        var time = new Date(this.date[i])
        this.date_poke.push(time.getTime())
      }
      var Tmaxpoke = this.date_poke[0]
      for (var j = 1; j < this.date_poke.length; j++) {
        if (this.date_poke[j] > Tmaxpoke) {
          Tmaxpoke = this.date_poke[j]
        }
      }
      console.log(this.date_poke, 'poke')
      var Tminpoke = this.date_poke[0]
      for (var l = 1; l < this.date_poke.length; l++) {
        if (this.date_poke[l] < Tminpoke) {
          Tminpoke = this.date_poke[l]
        }
      }

      var diff = Tmaxpoke - Tminpoke
      var day = Math.floor(diff / 86400000) + 1
      console.log(day, '天数')
      console.log(Tmaxpoke, 'mpoke')
      var endate = new Date(this.end)
      var mark = endate.getTime() - 3600 * 24 * 1000 * 45
      console.log(mark, 'mark')
      var a = this.getNowFormatDate(mark)
      var p = []
      for (var f = 0; f < this.im_date.length; f++) {
        p.push(this.getNowFormatDate(this.im_date[f]))
      }
      if (p.length === 1) {
        if (this.date_flag[0] === '最后一次化清'){
          this.option.series[5].markLine.data[0].xAxis = p[0]
        } else {
          this.option.series[4].markLine.data[0].xAxis = p[0]
        }
        console.log('11111111111111111111111111111111111111111111111')
      } else if (p.length === 2) {
        console.log('22222222222222222222222222222222222222222222222')
        if (this.date_flag[0] === '最后一次化清')
        {
          this.option.series[5].markLine.data[0].xAxis = p[0]
          this.option.series[4].markLine.data[0].xAxis = p[1]
        } else {
          this.option.series[4].markLine.data[0].xAxis = p[0]
          this.option.series[5].markLine.data[0].xAxis = p[1]
        }
      }

      console.log(this.option.series[4].markLine.data[0].xAxis, 'xaixs')
      this.option.series[3].markLine.data[0].xAxis = a
      const mk = {
        'x': '2023-03-03',
        'y': 28
      }
      const ip1 = {
        'x': '2023-03-04',
        'y': 29
      }
      const ip2 = {
        'x': '2023-03-05',
        'y': 30
      }
      this.option.dataset[3].source = mk
      this.option.dataset[4].source = ip1
      this.option.dataset[5].source = ip2
      console.log(this.mark_date, 'Mdate')
      this.max = Tmaxpoke + 3600 * 24 * 1000
      this.min = Tminpoke - 3600 * 24 * 1000
      console.log(new Date(this.max), 'maxpoke')
      console.log(new Date(this.min), 'minpoke')
      // this.max = new Date().getTime() + 3600 * 24 * 1000
      // this.min = new Date(this.start).getTime() - 3600 * 24 * 1000
      this.a = new Date(this.max)
      this.b = new Date(this.min)
      const list1 = {
        'x': this.redis_Data.x,
        'y': this.redis_Data.y,
        'date': this.n_date
      }
      this.option.dataset[0].source = list1
      this.option.xAxis[0].max = this.a
      this.option.xAxis[0].min = this.b
      this.option.xAxis[1].max = this.Maxxaxis()
      this.option.xAxis[1].min = this.Minxaxis()
      this.option.yAxis.max = this.Maxyaxis()
      this.option.yAxis.min = 0
      const list2 = {
        'x': this.x_expList,
        'y': this.y_expList,
        'date': this.exp_date
      }
      this.option.dataset[1].source = list2
      console.log(this.option.dataset[0].source.x, 'opx0')
      var lastx = []
      var lastfx = []
      var count = 0
      var comDate = null
      // var lineDate = new Date(Tmaxpoke - 3600 * 24 * 1000 * 45)
      console.log(endate, 'lindate')
      if (day > 45) {
        for (var t = 0; t < this.option.dataset[0].source.date.length; t++) {
          comDate = new Date(this.option.dataset[0].source.date[t])
          console.log(comDate, 'comDate')
          if (comDate < new Date(mark)) {
            lastx.push(this.option.dataset[0].source.x[t])
            count++
          }
        }
        for (var p = 0; p < count; p++) {
          lastfx.push(this.redis_Data.fx[p])
        }
      }
      console.log(lastfx, 'lastfx')
      console.log(lastx, 'lastx')
      console.log(count, 'count')
      var lx = this.redis_Data.x
      var lfx = this.redis_Data.fx
      for (var b = 0; b <= lx.length; b++) {
        var index1 = lastx.indexOf(lx[b])
        if (index1 <= -1) {
          this.lastx.push(lx[b])
        } else {
        }
      }

      for (var f = 0; f <= lfx.length; f++) {
        var index2 = lastfx.indexOf(lfx[f])
        if (index2 <= -1) {
          this.lastfx.push(lfx[f])
        } else {
        }
      }
      console.log(this.lastx, 'lx')
      console.log(this.lastfx, 'lfx')
      const list3 = {
        'x': this.lastx,
        'y': this.lastfx
      }
      this.option.dataset[2].source = list3
      console.log(this.option.dataset[2].source.x, 'opx2')
      console.log(this.option.dataset[0].source.x, 'opx0')
      const scatterEl = document.getElementById('scatterChart' + this.scat_id)
      console.log(scatterEl)
      // this.option.series[3].markLine.data[0].xAxis = this.m_date
      this.myChart = echarts.init(scatterEl, 'dark')
      this.myChart.setOption(this.option, true)
      // const xirOpts = {
      //   height: scatterEl.clientHeight,
      //   width: scatterEl.clientWidth
      // }
      var that = this
      window.onresize = function () {
        that.myChart.resize()
      }
      console.log(this.option.series[3].markLine.data[0].xAxis, 'markline')
    },
    getNowFormatDate(value) {
      var date = new Date(value)
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var e = Y + M + D
      var d = e.replace(/\s+/g,'')
      return d
    },
    ret() {
      return this.m_date
    }
  },
  props: {
    redis_Data: {
      type: Object,
      default: () => ({})
    },
    scat_id: {
      type: String,
      default: ''
    },
    showEmpty: {
      type: Boolean,
      default: false
    },
    start: {
      type: String,
      default: ''
    },
    end: {
      type: String,
      default: ''
    },
    im_date: {
      type: Array,
      default: () => []
    },
    date_flag: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
#scatterChart{
  width: 100%;
  height: 500px;
}

</style>
